<template>
  <div class="app-container">
    <el-card shadow="never">
      <div class="op">
        <el-button type="primary" plain icon="refresh" @click="handleQuery">刷新</el-button>
        <el-button type="danger" plain @click="getUnprocessed">未处理事件数量</el-button>
      </div>
      <div class="un">
        <span>未处理事件数量</span>
        <span>{{ unprocessed }}</span>
      </div>
      <el-table
        ref="dataTableRef"
        v-loading="loading"
        :data="eventList"
        highlight-current-row
        height="calc(100vh - 280px)"
        border
      >
        <el-table-column type="index" label="序号" width="80" align="center" />
        <el-table-column label="ID" prop="id" width="120" />
        <el-table-column label="事件类型" prop="event_type" min-width="140" />
        <el-table-column label="业务id" prop="business_id" width="120" />
        <el-table-column label="事件数据" prop="event_data" min-width="280" show-overflow-tooltip/>
        <el-table-column label="事件时间" prop="event_time" width="180"/>
        <el-table-column label="是否已处理" prop="processed" width="120">
          <template #default="scope">
            <el-tag :type="scope.row.processed ? 'success' : 'danger'">
              {{ scope.row.processed ? '已处理' : '未处理' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="处理时间" prop="processedTime" width="180"/>
      </el-table>

      <!-- <div class="pager">
        <pagination
          v-if="queryParams.total > 0"
          v-model:total="queryParams.total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="handleQuery"
        />
      </div> -->
    </el-card>
  </div>
</template>

<script setup lang="ts">
import EventAPI from '@/api/message/event.api';

const processedTag: any = {
  0: 'danger',
  1: 'success',
};
const processedMap: any = {
  0: '未处理',
  1: '已处理',
};
const loading = ref<boolean>(false);
const eventList = ref<any[]>([]);
const unprocessed = ref<number>(0);
const queryParams = reactive<{
  total: number;
  pageNum: number;
  pageSize: number;
  [key: string]: any;
}>({
  total: 0,
  pageNum: 1,
  pageSize: 10,
});

const handleQuery = () => {
  loading.value = true;
  EventAPI.getRecentList().then((data: any) => {
    eventList.value = data;
    loading.value = false;
  }).catch((err) => {
    loading.value = false;
  });
}

const getUnprocessed = () => {
  EventAPI.getUnprocessed().then((data: any) => {
    unprocessed.value = data;
  }).catch((err) => {
    
  })
}

onMounted(() => {
  handleQuery();
  getUnprocessed();
})
</script>

<style lang="scss" scoped>
.op{
  display: flex;
  justify-content: flex-end;
  margin-bottom: 15px;
}
.un{
  display: flex;
  margin-bottom: 15px;
  span:first-child{
    color: #333333;
    margin-right: 10px;
  }
  span:last-child{
    padding-left: 10px;
    font-size: 16px;
    color: rgb(250, 32, 32);
  }
}
</style>